
import React,{Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    ImageBackground,
    TouchableOpacity,
    Image,
    Platform
} from 'react-native';


import {BaseStyle,demension} from '../../Style/BaseStyle.js';
import Search from './Components/Search.js'
import {navigationMethod,headerRights} from "../../Utils/NavigatorCommon";
import IconColumn from "./Components/IconColumn";
import {iconInfoArray,secondsBuyArray} from "./DataCenter/HomeData";
import Video from 'react-native-video';
import DataListSection from '../../Components/DataListSection'
export default class Home extends Component
{
    static navigationOptions = ((props)=>{
       return{
           ...navigationMethod,
           headerRight:headerRights(()=>{
               console.warn(props)
           },"message")
       }
    })
    constructor(props) {
        super(props);
        this.state={
            paused:false
        }
    }

    render(){
        const navigator=this.props.navigation.navigate,vm=this;

        return(
            <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
                <View>
                    <Search placeholder="输入商品关键词"/>
                    <Image source={require('./images/banner.jpg')} style={styles.banners}/>
                    <View style={styles.iconParent}>
                        <IconColumn iconsArray={iconInfoArray} goNavigator={(nav,it)=>{
                            navigator(nav)
                        }}/>
                    </View>
                    <TouchableOpacity style={BaseStyle.commonPadding10} onPress={()=>{
                        vm.setState({
                            paused:!vm.state.paused
                        })
                    }}>
                        {vm.state.paused ? vm.renderVideo() : vm.renderImageIcon()}
                    </TouchableOpacity>
                    <View style={BaseStyle.commonPadding10}>
                        <DataListSection sections={secondsBuyArray} hasHeader={true}
                                         imageSource="imageSource"
                                         productDesc="productDesc"
                                         productName="productName"
                                         prices="prices"
                                         goMore={(item)=>{
                                             console.log(item)
                                         }}
                                         goDescription={(item)=>{
                                             console.log(item)
                                         }}
                        />
                    </View>

                </View>
            </ScrollView>
        )
    }
    renderVideo(){
        const vm=this;
        return(
            <Video style={styles.videos}
                   source={require('./images/WeChat_20190826193606.mp4')}
                   rate={1}
                   paused={vm.state.paused}
                   onEnd={()=>vm.endVideo()}
                   resizeMode={'contain'}
            />
        )
    }
    renderImageIcon(){
        return(
            <ImageBackground style={[styles.videos,BaseStyle.flexCenter]}
                   source={require('./images/videoBg.png')}>
                <Image  source={require('./images/playIcon.png')} style={styles.videoIcon} />
            </ImageBackground>
        )
    }
    endVideo(){
        this.setState({
            paused:true
        })
    }
}

const styles=StyleSheet.create({
    ...BaseStyle,
    banners:{
        width:demension.width,
        height:170
    },
    videos:{

        width:demension.width-20,
        height:198
    },
    iconParent:{
        ...BaseStyle.commonPadding10,
        ...BaseStyle.flexCommon
    },
    videoIcon:{
        width:60,
        height:60
    }
})
